
// 获取DOM元素
const messageInput = document.getElementById('message-input'); // 消息输入框元素
const sendBtn = document.getElementById('send-btn'); // 发送按钮元素
const chatMessages = document.querySelector('.chat-messages'); // 聊天消息容器元素
const chatItems = document.querySelectorAll('.chat-item'); // 所有聊天项元素
const chatTitle = document.querySelector('.chat-title'); // 聊天标题元素
const chatActions = document.querySelector('.chat-actions'); // 聊天操作区域元素
const toolBtns = document.querySelectorAll('.tool-btn'); // 工具按钮元素
const searchInput = document.getElementById('search-input'); // 搜索输入框元素
const searchResults = document.getElementById('search-results'); // 搜索结果区域元素
const sidebarItems = document.querySelectorAll('.sidebar-item[data-tab]'); // 侧边栏选项元素
const tabContents = document.querySelectorAll('.tab-content'); // 标签页内容区域元素
const userSearchInput = document.getElementById('user-search-input'); // 用户搜索输入框元素
const userListContent = document.getElementById('user-list-content'); // 用户列表内容区域元素

const chatArea = document.getElementById('chat-area'); // 聊天区域元素
const defaultArea = document.getElementById('default-area'); // 默认区域元素
const chatInputResizeHandle = document.getElementById('chat-input-resize-handle'); // 输入框拖拽手柄元素

// 输入框拖拽功能变量
let isResizing = false; // 是否正在拖拽
let startY = 0; // 拖拽起始Y坐标
let startHeight = 0; // 拖拽起始高度

// 输入框拖拽功能
if (chatInputResizeHandle) {
    chatInputResizeHandle.addEventListener('mousedown', function(e) {
        isResizing = true;
        startY = e.clientY;
        startHeight = parseInt(document.defaultView.getComputedStyle(chatInputResizeHandle.parentElement).height, 10);
        chatInputResizeHandle.classList.add('dragging');
        
        // 防止文本选择
        e.preventDefault();
    });
}

// 鼠标移动事件
document.addEventListener('mousemove', function(e) {
    if (!isResizing) return;
    
    const chatInput = chatInputResizeHandle.parentElement;
    const deltaY = startY - e.clientY;
    let newHeight = startHeight + deltaY;
    
    // 设置最小和最大高度限制
    newHeight = Math.max(120, Math.min(400, newHeight));
    
    chatInput.style.height = newHeight + 'px';
    chatInput.style.maxHeight = chatInput.style.height;
    
    // 调整聊天消息区域高度
    adjustChatMessagesHeight();
});

// 鼠标松开事件
document.addEventListener('mouseup', function() {
    if (isResizing) {
        isResizing = false;
        chatInputResizeHandle.classList.remove('dragging');
        
        // 保存当前高度到localStorage
        const chatInput = chatInputResizeHandle.parentElement;
        const currentHeight = parseInt(document.defaultView.getComputedStyle(chatInput).height, 10);
        localStorage.setItem('chatInputHeight', currentHeight);
    }
});

// 调整聊天消息区域高度的函数
function adjustChatMessagesHeight() {
    const chatInput = chatInputResizeHandle.parentElement;
    const chatInputHeight = parseInt(document.defaultView.getComputedStyle(chatInput).height, 10);
    const chatAreaHeight = chatArea.clientHeight;
    const chatHeaderHeight = chatArea.querySelector('.chat-header').clientHeight;
    
    // 计算聊天消息区域的新高度
    const newMessagesHeight = chatAreaHeight - chatHeaderHeight - chatInputHeight;
    chatMessages.style.height = newMessagesHeight + 'px';
    
    // 滚动到底部
    chatMessages.scrollTop = chatMessages.scrollHeight;
}

// 页面加载时恢复保存的高度
window.addEventListener('load', function() {
    const savedHeight = localStorage.getItem('chatInputHeight');
    if (savedHeight && chatInputResizeHandle) {
        const chatInput = chatInputResizeHandle.parentElement;
        chatInput.style.height = savedHeight + 'px';
        chatInput.style.maxHeight = chatInput.style.height;
        adjustChatMessagesHeight();
    }
});

// WebSocket相关变量
let stompClient = null; // WebSocket客户端实例
let currentChatUser = null; // 当前聊天用户ID
let currentSessionId = null; // 当前会话ID

// 文件上传相关变量
let fileInput = null;
let imageInput = null;

function connectWebSocket() {
    try {
        console.log('开始建立WebSocket连接...');
        const socket = new SockJS('/ws');
        stompClient = Stomp.over(socket);
        
        stompClient.connect({}, function(frame) {
            console.log('WebSocket连接成功! Connected: ' + frame);
            
            // 订阅私聊消息队列
            stompClient.subscribe('/user/queue/private', function(message) {
                console.log('=== 前端接收消息日志开始 ===');
                console.log('完整消息对象:', message);
                try {
                    const receivedMessage = JSON.parse(message.body);
                    
                    // 修复消息显示格式
                    receivedMessage.sender = receivedMessage.fromUser || '未知用户';
                    receivedMessage.from = receivedMessage.fromUser || '未知用户';
                    displayMessage(receivedMessage, 'received');
                } catch (error) {
                    console.error('❌ 消息解析错误:', error);
                    
                    // 尝试直接显示原始消息
                    const errorMessage = {
                        content: message.body || '无法解析的消息',
                        from: '系统',
                        timestamp: new Date().getTime(),
                        messageType: 1
                    };
                    displayMessage(errorMessage, 'received');
                }
            });
            
            // 订阅消息已读通知
            stompClient.subscribe('/user/queue/read', function(message) {
                console.log('接收到消息已读通知:', message.body);
                const messageId = JSON.parse(message.body);
                markMessageAsRead(messageId);
            });
            
            // 订阅消息撤回通知
            stompClient.subscribe('/user/queue/recall', function(message) {
                console.log('接收到消息撤回通知:', message.body);
                const messageId = JSON.parse(message.body);
                recallMessage(messageId);
            });
            
            // 订阅未读消息数
            stompClient.subscribe('/user/queue/unread.count', function(message) {
                console.log('接收到未读消息数:', message.body);
                const unreadCount = JSON.parse(message.body);
                updateUnreadCount(unreadCount);
            });
            
            // 通知服务器用户上线
            if (stompClient.connected) {
                stompClient.send('/app/chat.online', {}, 'online');
                console.log('已发送上线通知');
            }
            console.log('所有订阅完成，WebSocket连接已就绪');
            
        }, function(error) {
            console.error('WebSocket连接失败: ', error);
            setTimeout(connectWebSocket, 5000); // 5秒后重连
        });
    } catch (error) {
        console.error('WebSocket连接异常:', error);
        setTimeout(connectWebSocket, 5000);
    }
}
        
// 初始化文件上传功能
function initializeFileUpload() {
    // 创建隐藏的文件输入框
    fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.style.display = 'none';
    fileInput.accept = '*/*';
    
    imageInput = document.createElement('input');
    imageInput.type = 'file';
    imageInput.style.display = 'none';
    imageInput.accept = 'image/*';
    
    document.body.appendChild(fileInput);
    document.body.appendChild(imageInput);
    
    // 绑定文件上传事件
    fileInput.addEventListener('change', handleFileUpload);
    imageInput.addEventListener('change', handleImageUpload);
}
        
// 处理文件上传
function handleFileUpload(event) {
    const file = event.target.files[0];
    if (!file || !currentChatUser) return;
    
    const formData = new FormData();
    formData.append('file', file);
    formData.append('to', currentChatUser);
    
    fetch('/api/upload/file', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            console.log('文件上传成功:', data);
            // 文件消息会通过WebSocket自动显示
        } else {
            alert('文件上传失败: ' + data.error);
        }
    })
    .catch(error => {
        console.error('文件上传错误:', error);
        alert('文件上传失败');
    })
    .finally(() => {
        fileInput.value = '';
    });
}

// 处理图片上传
function handleImageUpload(event) {
    const image = event.target.files[0];
    if (!image || !currentChatUser) return;
    
    const formData = new FormData();
    formData.append('image', image);
    formData.append('to', currentChatUser);
    
    fetch('/api/upload/image', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            console.log('图片上传成功:', data);
            // 图片消息会通过WebSocket自动显示
        } else {
            alert('图片上传失败: ' + data.error);
        }
    })
    .catch(error => {
        console.error('图片上传错误:', error);
        alert('图片上传失败');
    })
    .finally(() => {
        imageInput.value = '';
    });
}
        
// 页面加载完成后连接WebSocket
window.addEventListener('load', function() {
    connectWebSocket();
    initializeFileUpload();
    
    // 默认选中第一个聊天
    if (chatItems.length > 0) {
        chatItems[0].click();
    }
});

// 侧边栏选项切换功能
sidebarItems.forEach(item => { // 遍历所有侧边栏选项
    item.addEventListener('click', function() { // 为每个选项添加点击事件监听器
        const tabName = this.getAttribute('data-tab'); // 获取当前点击选项的标签页名称
        
        // 移除所有活跃状态
        sidebarItems.forEach(i => i.classList.remove('active')); // 移除所有侧边栏选项的活跃状态
        tabContents.forEach(tab => { // 遍历所有标签页内容
            tab.classList.remove('active'); // 移除活跃状态
            tab.style.display = 'none'; // 隐藏标签页内容
        });
        
        // 添加当前活跃状态
        this.classList.add('active'); // 为当前点击的侧边栏选项添加活跃状态
        
        // 显示对应的内容
        const targetTab = document.getElementById(tabName + '-tab'); // 获取对应的标签页内容元素
        if (targetTab) { // 如果标签页内容元素存在
            targetTab.style.display = 'block'; // 显示标签页内容
            targetTab.classList.add('active'); // 添加活跃状态
        }
        
        // 如果是用户列表，加载用户数据
        if (tabName === 'users') { // 如果点击的是用户列表标签
            loadUserList(); // 加载用户列表数据
            
            document.querySelectorAll('.chat-item').forEach(i => i.classList.remove('active')); // 移除所有聊天项的活跃状态
            chatArea.style.display = 'none'; // 显示聊天区域
            defaultArea.style.display = 'flex'; // 隐藏默认区域
        }
    });
});

// 用户搜索功能
let userSearchTimeout = null;
userSearchInput.addEventListener('input', function() {
    const keyword = this.value.trim();
    
    // 防抖处理
    clearTimeout(userSearchTimeout);
    userSearchTimeout = setTimeout(() => {
        if (keyword.length > 0) {
            searchUsers(keyword);
        } else {
            loadUserList();
        }
    }, 500);
});

// 加载用户列表
function loadUserList() { // 加载用户列表函数
    fetch('/api/search/messages?keyword=', { // 发送GET请求到后端API
        method: 'GET', // 请求方法为GET
        headers: { // 请求头
            'Content-Type': 'application/json' // 内容类型为JSON
        }
    })
    .then(response => response.json()) // 将响应转换为JSON格式
    .then(data => { // 处理响应数据
        if (data.success) { // 如果请求成功
            displayUserList(data.filteredUsers || []); // 显示用户列表
        } else { // 如果请求失败
            console.error('获取用户列表失败:', data.error); // 输出错误信息到控制台
            displayUserList([]); // 显示空用户列表
        }
    })
    .catch(error => { // 捕获请求错误
        console.error('获取用户列表请求错误:', error); // 输出错误信息到控制台
        displayUserList([]); // 显示空用户列表
    });
}
// 搜索用户
function searchUsers(keyword) { // 搜索用户函数
    fetch(`/api/search/messages?keyword=${encodeURIComponent(keyword)}`, { // 发送带关键词的GET请求
        method: 'GET', // 请求方法为GET
        headers: { // 请求头
            'Content-Type': 'application/json' // 内容类型为JSON
        }
    })
    .then(response => response.json()) // 将响应转换为JSON格式
    .then(data => { // 处理响应数据
        if (data.success) { // 如果请求成功
            displayUserList(data.filteredUsers || []); // 显示搜索到的用户列表
        } else { // 如果请求失败
            console.error('搜索用户失败:', data.error); // 输出错误信息到控制台
            displayUserList([]); // 显示空用户列表
        }
    })
    .catch(error => { // 捕获请求错误
        console.error('搜索用户请求错误:', error); // 输出错误信息到控制台
        displayUserList([]); // 显示空用户列表
    });
}

// 显示用户列表
function displayUserList(users) { // 显示用户列表函数
    if (!userListContent) return; // 如果用户列表内容区域不存在，直接返回
    
    if (users.length === 0) { // 如果用户列表为空
        userListContent.innerHTML = `
            <div class="no-results">
                <i class="fa-solid fa-user-group" style="font-size: 48px; color: #ccc; margin-bottom: 16px;"></i>
                <p>暂无用户</p>
            </div>
        `;
    } else { // 如果有用户数据
        let html = ''; // 初始化HTML字符串
        users.forEach(user => { // 遍历每个用户
            html += `
                <div class="user-item" data-user-id="${user.userId}" data-user-name="${user.userName}" onclick="startChatWithUser('${user.userId}', '${user.userName}')">
                    <div class="avatar">${user.userName ? user.userName.charAt(0).toUpperCase() : 'U'}</div>
                    <div class="user-info">
                        <div class="user-name">${user.userName || '未知用户'}</div>
                        <div class="user-status">${user.email || ''}</div>
                    </div>
                </div>
            `;
        });
        userListContent.innerHTML = html; // 将生成的HTML设置到用户列表内容区域
    }
}

// 创建新的聊天项
function createNewChatItem(userId, userName) { // 创建新聊天项函数
    const chatListContent = document.getElementById('chat-list-content'); // 获取聊天列表内容区域
    const newChatItem = document.createElement('div'); // 创建新的div元素作为聊天项
    newChatItem.className = 'chat-item'; // 设置CSS类名
    newChatItem.setAttribute('data-chat', userId); // 设置数据属性记录用户ID
    
    const now = new Date(); // 获取当前时间
    const timeString = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`; // 格式化时间字符串
    
    newChatItem.innerHTML = `
        <div class="avatar">${userName ? userName.charAt(0).toUpperCase() : 'U'}</div>
        <div class="chat-info">
            <div class="chat-name">${userName || '新用户'}</div>
        </div>
    `;
    
    // 添加到列表顶部
    chatListContent.insertBefore(newChatItem, chatListContent.firstChild); // 将新聊天项插入到列表顶部
	
	// 查询建立会话
	queryConversation(userId); 
    
    // 绑定点击事件
    newChatItem.addEventListener('click', function() { // 为聊天项添加点击事件
        // 移除所有活跃状态
        document.querySelectorAll('.chat-item').forEach(i => i.classList.remove('active')); // 移除所有聊天项的活跃状态
        // 添加当前活跃状态
        this.classList.add('active'); // 为当前点击的聊天项添加活跃状态
        
        // 更新当前聊天用户
        currentChatUser = userId; // 设置当前聊天用户ID
        chatTitle.textContent = userName; // 更新聊天标题为用户名称
        
        // 显示聊天操作按钮
        chatActions.style.display = 'flex'; // 显示聊天操作区域
        
        // 清空当前聊天记录
        chatMessages.innerHTML = ''; // 清空聊天消息容器
        
        // 获取历史消息
        fetchHistoryMessages(userId); // 获取与当前用户的历史消息
    });
    
    return newChatItem; // 返回创建的聊天项对象
}

// 建立好友关系函数
function buildFriendRelationship(contactId) {
	fetch(`/wechat/user/contact/build?contactId=${contactId}`, { // 发送带关键词的GET请求
	    method: 'GET', // 请求方法为GET
	    headers: { // 请求头
	        'Content-Type': 'application/json' // 内容类型为JSON
	    }
	})
	.then(response => response.json()) // 将响应转换为JSON格式
	.then(data => { // 处理响应数据
        console.log("建立好友关系：",data);
	})
	.catch(error => { // 捕获请求错误
	    console.error('建立好友关系函数请求错误:', error); // 输出错误信息到控制台
	});
}

//查询并创建会话
function queryConversation(targetId){
	fetch(`/wechat/conversation/queryConversation?targetId=${targetId}`, { // 发送带关键词的GET请求
	    method: 'GET', // 请求方法为GET
	    headers: { // 请求头
	        'Content-Type': 'application/json' // 内容类型为JSON
	    }
	})
	.then(response => response.json()) // 将响应转换为JSON格式
	.then(data => { // 处理响应数据
	    console.log("查询会话：",data);
	})
	.catch(error => { // 捕获请求错误
	    console.error('建立会话函数请求错误:', error); // 输出错误信息到控制台
	});
}

// 开始与用户聊天
function startChatWithUser(userId, userName) { // 开始与用户聊天函数
    // 切换到聊天列表
    const chatTab = document.querySelector('[data-tab="chat"]'); // 获取聊天标签页元素
    if (chatTab) { // 如果聊天标签页存在
        chatTab.click(); // 模拟点击切换到聊天标签页
    }

    // 建立好友关系
    buildFriendRelationship(userId); // 建立好友关系
    
    // 检查是否已存在与用户的聊天
    const existingChat = document.querySelector(`[data-chat="${userId}"]`); // 查找已存在的对应聊天项
    if (existingChat) { // 如果已存在聊天项
        existingChat.click(); // 模拟点击切换到已存在的聊天
    } else { // 如果不存在聊天项
        // 创建新的聊天项
        const newChatItem = createNewChatItem(userId, userName); // 调用函数创建新聊天项
        
        // 切换到新聊天
        newChatItem.click(); // 模拟点击切换到新创建的聊天
        chatArea.style.display = 'flex'; // 显示聊天区域
        defaultArea.style.display = 'none'; // 隐藏默认区域
    }
}

// 获取历史消息（模拟）
function fetchHistoryMessages(userId) { // 获取历史消息函数
	//查询历史消息
	fetch(`/wechat/message/queryList?targetId=${userId}`, { // 发送带关键词的GET请求
	    method: 'GET', // 请求方法为GET
	    headers: { // 请求头
	        'Content-Type': 'application/json' // 内容类型为JSON
	    }
	})
	.then(response => response.json()) // 将响应转换为JSON格式
	.then(result => { // 处理响应数据
	    console.log("获取历史消息：", result);
	    if (result.code == web_status.SUCCESS) { // 如果请求成功
            const messages = result.data;
            messages.forEach(msg => { // 遍历每条消息
                displayMessage(msg, msg.type); // 显示消息
            });
	    } else { // 如果请求失败
	        console.error('获取历史消息函数失败:', result.error); // 输出错误信息到控制台
	    }
	})
	.catch(error => { // 捕获请求错误
	    console.error('获取历史消息函数请求错误:', error); // 输出错误信息到控制台
	});
}

// 显示消息
function displayMessage(message, type) { // 显示消息函数
    const messageElement = document.createElement('div'); // 创建消息元素
    messageElement.className = `message ${type}`; // 设置消息CSS类名
    messageElement.setAttribute('data-message-id', message.id || new Date().getTime()); // 设置消息ID属性
    
    // 使用消息中的时间戳，如果没有则使用当前时间
    const timestamp = message.timestamp || new Date().getTime(); // 获取时间戳
    const messageTime = new Date(timestamp); // 转换为日期对象
    const timeString = `${messageTime.getHours()}:${messageTime.getMinutes().toString().padStart(2, '0')}`; // 格式化时间字符串
    
    let messageContent = ''; // 初始化消息内容HTML
    
    // 根据消息类型显示不同内容
    switch (message.messageType) { // 根据消息类型处理
        case 1: // 文本消息
            messageContent = `<div class="message-bubble">${message.content}</div>`; // 纯文本消息内容
            break;
        case 2: // 图片消息
            messageContent = `
                <div class="message-bubble image-message">
                    <img src="${message.fileUrl}" alt="图片" onclick="openImagePreview('${message.fileUrl}')" style="max-width: 200px; max-height: 200px; cursor: pointer;">
                    <div class="image-caption">${message.fileName || '图片'}</div>
                </div>
            `;
            break;
        case 3: // 文件消息
            messageContent = `
                <div class="message-bubble file-message">
                    <div class="file-icon">📎</div>
                    <div class="file-info">
                        <div class="file-name">${message.fileName || '文件'}</div>
                        <div class="file-size">${formatFileSize(message.fileSize)}</div>
                    </div>
                    <a href="${message.fileUrl}" download="${message.fileName}" class="download-btn">下载</a>
                </div>
            `;
            break;
        default: // 默认处理
            messageContent = `<div class="message-bubble">${message.content}</div>`; // 默认文本消息
    }
    
    if (type === 'received') { // 如果是接收的消息
        // 接收的消息显示头像和发送者信息
        const senderInitial = message.from ? message.from.charAt(0).toUpperCase() : '?'; // 发送者首字母
        messageElement.innerHTML = `
            <div class="avatar">${senderInitial}</div>
            <div class="message-content">
                ${messageContent}
                <div class="message-time">${timeString}</div>
            </div>
        `;
    } else { // 如果是发送的消息
        // 发送的消息只显示内容和时间
        messageElement.innerHTML = `
            <div class="message-content">
                ${messageContent}
                <div class="message-time">${timeString}</div>
            </div>
        `;
    }
    
    chatMessages.appendChild(messageElement); // 将消息元素添加到聊天消息容器
    chatMessages.scrollTop = chatMessages.scrollHeight; // 滚动到底部显示最新消息
}
        
// 格式化文件大小
function formatFileSize(bytes) {
    if (!bytes) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

// 图片预览功能
function openImagePreview(imageUrl) {
    const modal = document.createElement('div');
    modal.id = 'image-preview-modal';
    modal.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    `;
    
    modal.innerHTML = `
        <div class="image-preview-container" style="position: relative; max-width: 90%; max-height: 90%;">
            <img src="${imageUrl}" style="max-width: 100%; max-height: 100%; object-fit: contain;" 
                    onclick="event.stopPropagation()" class="preview-image">
            <div class="image-preview-actions" style="position: absolute; top: 20px; right: 20px; display: flex; gap: 10px;">
                <button onclick="closeImagePreview()" style="background: none; border: none; color: white; font-size: 24px; cursor: pointer; padding: 5px;">×</button>
                <a href="${imageUrl}" download style="background: rgba(255,255,255,0.2); border: none; color: white; padding: 8px 12px; border-radius: 4px; cursor: pointer; text-decoration: none;">下载</a>
            </div>
        </div>
    `;
    
    // 添加键盘事件监听
    const keyHandler = function(e) {
        if (e.key === 'Escape') {
            closeImagePreview();
        }
    };
    
    document.addEventListener('keydown', keyHandler);
    
    modal.addEventListener('click', function() {
        closeImagePreview();
    });
    
    document.body.appendChild(modal);
    
    // 存储事件监听器，以便后续移除
    modal._keyHandler = keyHandler;
}

// 关闭图片预览
function closeImagePreview() {
    const modal = document.getElementById('image-preview-modal');
    if (modal) {
        if (modal._keyHandler) {
            document.removeEventListener('keydown', modal._keyHandler);
        }
        modal.remove();
    }
}
        
// 发送按钮点击事件
sendBtn.addEventListener('click', sendMessage);

// 回车发送消息
messageInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendMessage();
    }
});

// 输入框输入事件（输入状态）
messageInput.addEventListener('input', function() {
    handleTyping();
});

// 绑定工具按钮事件
toolBtns.forEach(btn => {
    btn.addEventListener('click', function() {
        const iconClass = this.className;
        if (iconClass.includes('fa-paperclip')) {
            // fileInput.click();
        } else if (iconClass.includes('fa-image')) {
            // imageInput.click();
        } else if (iconClass.includes('fa-face-smile')) {
            // 表情功能
            alert('表情功能待实现');
        } else if (iconClass.includes('fa-folder-open')) {
            // 文件管理
            alert('文件管理功能待实现');
        }
    });
});
        
// 发送消息
function sendMessage() {
    const content = messageInput.value.trim();
    console.log('发送消息按钮被点击，内容:', content);
    console.log('当前聊天用户:', currentChatUser);
    console.log('WebSocket连接状态:', stompClient ? stompClient.connected : '未连接');
    
    if (content && stompClient && stompClient.connected && currentChatUser) {
        const message = {
            to: currentChatUser,
            content: content,
            messageType: 1 // 文本消息
        };
        console.log('准备发送消息:', message);
        
        stompClient.send('/app/chat.sendMessage', {}, JSON.stringify(message));
        
        console.log('消息已发送到后端');
        
        // 本地显示已发送消息
        const messageElement = document.createElement('div');
        messageElement.className = 'message sent';
        
        const now = new Date();
        const timeString = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;
        
        messageElement.innerHTML = `
            <div class="message-content">
                <div class="message-bubble">${content}</div>
                <div class="message-time">${timeString}</div>
            </div>
        `;
        
        chatMessages.appendChild(messageElement);
        messageInput.value = '';
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }
}